<template>
  <div class="both">
    <van-nav-bar title="我的音乐" left-arrow>
      <template #right>
        <van-icon name="bar-chart-o" size="18" @click="rankListHandle" />
      </template>
    </van-nav-bar>
    <div class="my">
      <van-collapse v-model="activeName" accordion>
        <van-collapse-item icon="service-o" title="本地音乐" name="1"
          >无</van-collapse-item
        >
        <van-collapse-item icon="play-circle-o" title="最近播放—歌曲" name="2">
          <table>
            <tr
              v-for="item in lists"
              :key="item.id"
              class="both"
              @click="jumpPlay(item.data.id)"
            >
              <td class="one">{{ item.data.name }}</td>
              <td class="two">{{ item.data.ar[0].name }}</td>
            </tr>
          </table>
        </van-collapse-item>
        <van-collapse-item icon="stop-circle-o" title="最近播放—视频" name="3">
          <table class="shipin">
            <tr class="itemVideo" v-for="item in listVideo" :key="item.id">
              <td>
                <!-- <video :src="item.data.coverUrl" autoplay="autoplay" preload controls></video> -->
                <img :src="item.data.coverUrl" alt="" />
              </td>
              <td class="shipinshuoming">
                <p>{{ item.data.title }}</p>
              </td>
            </tr>
          </table>
        </van-collapse-item>
        <van-collapse-item icon="star-o" title="最近播放—歌单" name="4">
          <table>
            <tr
              class="itemgedan"
              v-for="item in RecentPlaylists"
              :key="item.id"
              @click="jumpCollect(item.data.id)"
            >
              <td><img :src="item.data.coverImgUrl" alt="歌单图片" /></td>
              <td>{{ item.data.name }}</td>
            </tr>
          </table>
        </van-collapse-item>
      </van-collapse>
      <hr />
      <van-collapse v-model="activeNames">
        <van-collapse-item title="我创建的歌单" name="1">
          <van-card
            class="card"
            v-for="sl in list"
            :key="Math.random() * 1000 + sl"
            :title="sl.name"
            :desc="sl.trackCount + '首'"
            :thumb="sl.coverImgUrl"
            @click="collectHandle(sl.id)"
          />
        </van-collapse-item>
        <van-collapse-item title="我收藏的歌手" name="2">
          <van-card
            class="geshou"
            v-for="gs in people"
            :key="Math.random() * 1000 + gs"
            :title="gs.name"
            :thumb="gs.img1v1Url"
          />
        </van-collapse-item>
      </van-collapse>
      <div class="kong"></div>
    </div>
  </div>
</template>

<script>
import { singAPI, userAPI } from "../services/User";
import { recentsongAPI } from "../services/User";
import { recentVideoAPI } from "../services/User";
import { RecentPlaylistsAPI } from "../services/User";
export default {
  data() {
    return {
      activeNames: ["1"],
      activeName: "1",
      list: [],
      people: [],
      lists: [],
      listVideo: [],
      RecentPlaylists: [],
    };
  },
  created() {
    const userId = localStorage.getItem("id");
    userAPI(userId).then((res) => {
      this.list = res.playlist;
      // console.log(res);
    });

    singAPI().then((res) => {
      this.people = res.data;
      // console.log(res);
    });

    recentsongAPI().then((res) => {
      this.lists = res.data.list;
      // console.log(res.data.list);
      // console.log(res.data.list[0]);
    });
    recentVideoAPI().then((res) => {
      this.listVideo = res.data.list;
      // console.log(res.data.list[0].data.coverUrl);
    });
    RecentPlaylistsAPI().then((res) => {
      this.RecentPlaylists = res.data.list;
      // console.log(res.data.list[0].data.id);
    });
  },
  methods: {
    rankListHandle() {
      this.$router.push({
        name: "RankList",
      });
    },
    collectHandle(id) {
      this.$router.push({
        name: "Collect",
        query: { id },
      });
    },
    jumpCollect(id) {
      this.$router.push({
        name: "Collect",
        query: { id },
      });
    },
    jumpPlay(id) {
      this.$router.push({
        name: "Play",
        query: { id },
      });
    },
  },
};
</script>

<style scoped>
.card {
  font-size: 14px;
}
.van-card__thumb {
  width: 60px;
  height: 60px;
}
.geshou {
  font-size: 18px;
}
.kong {
  height: 50px;
}
.both {
  width: 100vw;
  /* height: 30px;
  display: flex;
  justify-content: flex-start;
  line-height: 30px; */
}
.one {
  width: 70vw;
  font-weight: normal;
  text-overflow: ellipsis;
  overflow: hidden;
}
.two {
  width: 30vw;
  font-weight: normal;
  text-overflow: ellipsis;
  overflow: hidden;
}
.shipin {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.itemVideo {
  display: flex;
  justify-content: space-around;
  margin-top: 10px;
  width: 100%;
  height: 6.5rem;
}
.itemVideo td {
  width: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.itemVideo td p {
  padding-left: 8px;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
img {
  width: 100%;
  height: 100%;
}
.itemgedan {
  width: 100%;
}
.itemgedan td {
  width: 40%;
}
.itemgedan td:nth-of-type(2) {
  width: 60%;
}
.itemgedan img {
  width: 80%;
}
</style>
